<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-20 19:27:43
 * @Description  : 问题添加或者修改面板
-->

<template>
  <div class="bg-lightColor question-edit-con p-3 text-[13px]">
    <n-grid x-gap="12" :cols="1" class="mb-2">
      <n-gi>
        <n-button
          type="primary"
          size="small"
          class="!text-[13px]"
          @click="backView"
        >
          <div class="mr-2 rotate-90 transform">
            <SvgIcon icon="xiala" color="#fff" size="10px"></SvgIcon>
          </div>
          返回
        </n-button>
      </n-gi>
    </n-grid>
    <n-divider class="!my-2" />
    <n-form
      ref="questionFormRef"
      :label-width="isSmall ? 100 : 120"
      label-placement="left"
      :label-align="isSmall ? 'left' : 'right'"
      :model="question"
      size="small"
      require-mark-placement="right"
      :rules="formRule"
    >
      <n-form-item label="问题名称：" path="name">
        <n-input
          v-model:value="question.name"
          :allow-input="noSideSpace"
          placeholder="请输入问题名称"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>
      <n-form-item label="问题类型：" path="type">
        <n-radio-group v-model:value="question.type" name="radiobuttongroup2">
          <n-radio-button :value="0" label="单选" />
          <n-radio-button :value="1" label="多选" />
          <n-radio-button :value="2" label="简答" />
        </n-radio-group>
      </n-form-item>

      <n-form-item label="所属试卷：" path="paperId">
        <!-- <n-select
          v-model:value="question.paperId"
          :options="questionList"
          class="!w-[300px]"
        /> -->
        <CommonSelect
          :has-btn="false"
          @change-value="(value: any) => (question.paperId = value.paperId)"
        ></CommonSelect>
      </n-form-item>

      <n-form-item label="分数：" path="score">
        <n-input
          v-model:value="question.score"
          :allow-input="noSideSpace"
          placeholder="请输入分数"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>

      <n-form-item label="答案：" path="answer">
        <n-input
          v-model:value="question.answer"
          :allow-input="noSideSpace"
          placeholder="请输入答案"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>

      <n-form-item label="选项：" path="options">
        <n-input
          v-model:value="question.options"
          :allow-input="noSideSpace"
          placeholder="请输入选项"
          clearable
          type="textarea"
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>

      <n-form-item label="解析：" path="analysis">
        <n-input
          v-model:value="question.analysis"
          :allow-input="noSideSpace"
          placeholder="请输入解析"
          clearable
          type="textarea"
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>

      <n-form-item label="问题图片：" path="pic">
        <UploadPanel
          :file-list="questionPics"
          @file-change="(res) => handlePicChange(res, 'pic')"
        ></UploadPanel>
      </n-form-item>
      <n-form-item label="问题解析图片：" path="anaPics">
        <UploadPanel
          :file-list="questionAnaPics"
          @file-change="(res) => handlePicChange(res, 'anaPics')"
        ></UploadPanel>
      </n-form-item>
      <n-form-item label=" " v-permission="['admin']">
        <n-button
          type="primary"
          class="grent-btn w-[120px]"
          @click="handleSave(false)"
        >
          保存
        </n-button>
        <n-button
          v-if="!isModify"
          type="primary"
          class="grent-btn w-[120px] ml-2"
          @click="handleSave(true)"
        >
          保存并新增
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst, UploadFileInfo } from 'naive-ui'
import type { QuestionRes, QuestionUpdateReq } from '@/types/question'
import { noSideSpace } from '@/utils'
import { userMenuShow } from '@/hooks/useMenuShow'
import UploadPanel from '@/views/User/Explorer/components/UploadPanel.vue'
const { isSmall } = userMenuShow()

const props = defineProps<{
  isModify: boolean
  questionRes?: QuestionRes
}>()

const emits = defineEmits<{
  (e: 'backView'): void
  (
    e: 'changeQuestion',
    type: number,
    data: QuestionUpdateReq,
    addNew: boolean
  ): void
}>()
const backView = () => {
  emits('backView')
}

const questionPics = ref<UploadFileInfo[]>([])
const questionAnaPics = ref<UploadFileInfo[]>([])

const question = reactive<QuestionUpdateReq>({
  name: '',
  paperId: '',
  type: '1',
  answer: '',
  options: '',
  analysis: '',
  score: '',
  anaPics: '',
  pic: ''
})

const questionList = ref([
  {
    label: '文件清理',
    value: 'system.cleanFile'
  },
  {
    label: '日志导出',
    value: 'system.exportLog'
  },
  {
    label: '安全配置更换',
    value: 'system.secrtyUpdate'
  }
])

const initQuestion = () => {
  if (props.isModify) {
    const { name, paperId, answer, options, type, id } =
      props.questionRes as QuestionRes
    question.questionId = id
    question.name = name
    question.paperId = paperId
    question.answer = answer
    question.options = options
    question.type = type
  }
}

const handlePicChange = (
  fileList: UploadFileInfo[],
  prop: keyof QuestionUpdateReq
) => {
  // if (fileList.length) {
  //   exam.pic = fileList[0].url as string
  // }
  question[prop] = fileList.map((item) => item.url) as any
}

onMounted(() => {
  initQuestion()
})

const formRule = {
  name: [
    {
      required: true,
      message: '请输入问题名称',
      trigger: ['blur']
    },
    {
      min: 1,
      max: 50,
      trigger: ['blur'],
      message: '长度在1-50位'
    }
  ],
  pid: [
    {
      required: true,
      message: '请选择父级',
      trigger: ['blur']
    }
  ],
  examId: [
    {
      required: true,
      message: '请选择科目ID',
      trigger: ['blur']
    }
  ]
}

const questionFormRef = ref<FormInst | null>(null)

const handleSave = (addNew = false) => {
  questionFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }
    if (props.isModify) {
      emits('changeQuestion', 1, question, addNew)
    } else {
      emits('changeQuestion', 0, question, addNew)
    }
    if (addNew) {
      question.name = ''
      question.pic = ''
      question.anaPics = ''
      question.answer = ''
      question.analysis = ''
      question.options = ''
      questionAnaPics.value = []
      questionPics.value = []
    }
  })
}
</script>

<style scoped lang="scss"></style>
